<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 报销详情</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="my_travel_expense.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">报销详情</div>
      <div class="nav-right">
        <i class="fas fa-share-alt"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 报销状态 -->
      <div class="bg-blue-500 text-white p-4">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-lg font-medium">北京出差</div>
            <div class="text-sm mt-1">报销编号：TR-20240328-001</div>
          </div>
          <div class="text-right">
            <div class="text-lg font-medium">¥4,580.00</div>
            <div class="text-sm mt-1">审批中 (1/3)</div>
          </div>
        </div>
      </div>
      
      <!-- 快捷操作 -->
      <div class="flex bg-white border-b">
        <button class="flex-1 py-3 flex flex-col items-center">
          <i class="fas fa-edit text-blue-500"></i>
          <span class="text-xs mt-1">修改</span>
        </button>
        <button class="flex-1 py-3 flex flex-col items-center">
          <i class="fas fa-copy text-blue-500"></i>
          <span class="text-xs mt-1">复制</span>
        </button>
        <button class="flex-1 py-3 flex flex-col items-center">
          <i class="fas fa-trash-alt text-blue-500"></i>
          <span class="text-xs mt-1">撤回</span>
        </button>
        <button class="flex-1 py-3 flex flex-col items-center">
          <i class="fas fa-comment-alt text-blue-500"></i>
          <span class="text-xs mt-1">催办</span>
        </button>
      </div>
      
      <!-- 基本信息 -->
      <div class="card mx-4 mt-4 mb-4">
        <div class="card-header">
          <span>基本信息</span>
        </div>
        <div class="card-body">
          <div class="info-item">
            <div class="info-label">报销人</div>
            <div class="info-value">张医生</div>
          </div>
          <div class="info-item">
            <div class="info-label">所属部门</div>
            <div class="info-value">内科</div>
          </div>
          <div class="info-item">
            <div class="info-label">报销类型</div>
            <div class="info-value">差旅费</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差地点</div>
            <div class="info-value">北京</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差日期</div>
            <div class="info-value">2024-03-20 至 2024-03-23</div>
          </div>
          <div class="info-item">
            <div class="info-label">出差事由</div>
            <div class="info-value">参加医学会议</div>
          </div>
          <div class="info-item">
            <div class="info-label">提交日期</div>
            <div class="info-value">2024-03-28</div>
          </div>
        </div>
      </div>
      
      <!-- 费用明细 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>费用明细</span>
          <span class="text-sm text-gray-500">共6项</span>
        </div>
        <div class="card-body p-0">
          <!-- 费用项 1 -->
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-plane text-blue-500 mr-2"></i>
                <span class="font-medium">往返机票</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                <span>2024-03-20 / 2024-03-23</span>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">¥1,800.00</div>
              <div class="text-xs text-gray-500 mt-1">
                <i class="fas fa-receipt"></i> 发票已上传
              </div>
            </div>
          </div>
          
          <!-- 费用项 2 -->
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-hotel text-blue-500 mr-2"></i>
                <span class="font-medium">酒店住宿</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                <span>2024-03-20 - 2024-03-23 (3晚)</span>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">¥1,500.00</div>
              <div class="text-xs text-gray-500 mt-1">
                <i class="fas fa-receipt"></i> 发票已上传
              </div>
            </div>
          </div>
          
          <!-- 费用项 3 -->
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-utensils text-blue-500 mr-2"></i>
                <span class="font-medium">餐饮费</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                <span>2024-03-20 - 2024-03-23</span>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">¥600.00</div>
              <div class="text-xs text-gray-500 mt-1">
                <i class="fas fa-receipt"></i> 发票已上传
              </div>
            </div>
          </div>
          
          <!-- 费用项 4 -->
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-taxi text-blue-500 mr-2"></i>
                <span class="font-medium">市内交通</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                <span>2024-03-20 - 2024-03-23</span>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">¥280.00</div>
              <div class="text-xs text-gray-500 mt-1">
                <i class="fas fa-receipt"></i> 发票已上传
              </div>
            </div>
          </div>
          
          <!-- 费用项 5 -->
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-file-invoice-dollar text-blue-500 mr-2"></i>
                <span class="font-medium">会议注册费</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                <span>2024-03-21 - 2024-03-22</span>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">¥300.00</div>
              <div class="text-xs text-gray-500 mt-1">
                <i class="fas fa-receipt"></i> 发票已上传
              </div>
            </div>
          </div>
          
          <!-- 费用项 6 -->
          <div class="list-item">
            <div>
              <div class="flex items-center">
                <i class="fas fa-shopping-bag text-blue-500 mr-2"></i>
                <span class="font-medium">其他费用</span>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                <span>资料打印、礼品等</span>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium">¥100.00</div>
              <div class="text-xs text-gray-500 mt-1">
                <i class="fas fa-receipt"></i> 发票已上传
              </div>
            </div>
          </div>
          
          <!-- 总计 -->
          <div class="p-4 border-t">
            <div class="flex justify-between items-center">
              <div class="font-medium">费用总计</div>
              <div class="text-lg font-medium text-blue-500">¥4,580.00</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 审批流程 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>审批流程</span>
        </div>
        <div class="card-body p-0">
          <div class="relative pl-8 py-4 border-l-2 border-blue-500 ml-4">
            <div class="absolute left-0 top-4 w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
              <i class="fas fa-check text-white text-xs"></i>
            </div>
            <div class="font-medium">提交申请</div>
            <div class="text-xs text-gray-500 mt-1">张医生 · 2024-03-28 10:30</div>
          </div>
          
          <div class="relative pl-8 py-4 border-l-2 border-blue-500 ml-4">
            <div class="absolute left-0 top-4 w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
              <i class="fas fa-spinner fa-spin text-white text-xs"></i>
            </div>
            <div class="font-medium">部门主任审批</div>
            <div class="text-xs text-gray-500 mt-1">李主任 · 审批中</div>
            <div class="text-xs text-gray-500 mt-1">已等待: 1天2小时</div>
          </div>
          
          <div class="relative pl-8 py-4 border-l-2 border-gray-300 ml-4">
            <div class="absolute left-0 top-4 w-4 h-4 rounded-full bg-gray-300"></div>
            <div class="font-medium text-gray-500">财务审核</div>
            <div class="text-xs text-gray-500 mt-1">王会计 · 待审批</div>
          </div>
          
          <div class="relative pl-8 py-4 ml-4">
            <div class="absolute left-0 top-4 w-4 h-4 rounded-full bg-gray-300"></div>
            <div class="font-medium text-gray-500">财务付款</div>
            <div class="text-xs text-gray-500 mt-1">财务部 · 待处理</div>
          </div>
        </div>
      </div>
      
      <!-- 附件 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>附件</span>
          <span class="text-sm text-gray-500">共6个</span>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-file-pdf text-red-500 mr-2 text-xl"></i>
              <div>
                <div class="font-medium">机票发票.pdf</div>
                <div class="text-xs text-gray-500 mt-1">1.2MB · 2024-03-28</div>
              </div>
            </div>
            <i class="fas fa-download text-gray-400"></i>
          </div>
          
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-file-pdf text-red-500 mr-2 text-xl"></i>
              <div>
                <div class="font-medium">酒店发票.pdf</div>
                <div class="text-xs text-gray-500 mt-1">0.8MB · 2024-03-28</div>
              </div>
            </div>
            <i class="fas fa-download text-gray-400"></i>
          </div>
          
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-file-pdf text-red-500 mr-2 text-xl"></i>
              <div>
                <div class="font-medium">餐饮发票.pdf</div>
                <div class="text-xs text-gray-500 mt-1">1.5MB · 2024-03-28</div>
              </div>
            </div>
            <i class="fas fa-download text-gray-400"></i>
          </div>
          
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-file-pdf text-red-500 mr-2 text-xl"></i>
              <div>
                <div class="font-medium">交通发票.pdf</div>
                <div class="text-xs text-gray-500 mt-1">0.9MB · 2024-03-28</div>
              </div>
            </div>
            <i class="fas fa-download text-gray-400"></i>
          </div>
          
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-file-pdf text-red-500 mr-2 text-xl"></i>
              <div>
                <div class="font-medium">会议注册费发票.pdf</div>
                <div class="text-xs text-gray-500 mt-1">0.6MB · 2024-03-28</div>
              </div>
            </div>
            <i class="fas fa-download text-gray-400"></i>
          </div>
          
          <div class="list-item">
            <div class="flex items-center">
              <i class="fas fa-file-pdf text-red-500 mr-2 text-xl"></i>
              <div>
                <div class="font-medium">其他费用发票.pdf</div>
                <div class="text-xs text-gray-500 mt-1">0.7MB · 2024-03-28</div>
              </div>
            </div>
            <i class="fas fa-download text-gray-400"></i>
          </div>
        </div>
      </div>
      
      <!-- 备注 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>备注</span>
        </div>
        <div class="card-body">
          <p class="text-sm text-gray-600">
            此次北京出差参加了为期两天的全国医学会议，会议主题为"新型冠状病毒肺炎的临床治疗与研究进展"。会议期间与多位专家进行了学术交流，获取了最新的临床研究成果和治疗方案。
          </p>
        </div>
      </div>
      
      <!-- 操作记录 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>操作记录</span>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div>
              <div class="font-medium">创建报销单</div>
              <div class="text-xs text-gray-500 mt-1">张医生 · 2024-03-28 10:15</div>
            </div>
          </div>
          
          <div class="list-item">
            <div>
              <div class="font-medium">提交审批</div>
              <div class="text-xs text-gray-500 mt-1">张医生 · 2024-03-28 10:30</div>
            </div>
          </div>
          
          <div class="list-item">
            <div>
              <div class="font-medium">查看报销单</div>
              <div class="text-xs text-gray-500 mt-1">李主任 · 2024-03-28 14:20</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item active">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>
</body>
</html> 